<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育-innerhtml</div> <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby" value="1001-电影" > 电影
<input type="checkbox" name="hobby" value="1002-旅游" > 旅游
<input type="checkbox" name="hobby" value="1003-游戏"> 游戏
<br>

<script>
    // 获取Element元素，获取值，并改变对象的值
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // 获取现在的值
    var path = img.src;
    console.log(path);
    // 改变现在的值
    img.src = "../imgs/on.gif";
    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    var brandNames = ["小米","华为"]; // 从后台（数据库）获取，肯定动态的改变网页原有的数据
    for (let i = 0; i <divs.length ; i++) {
        let devElement = divs[i];
        // 拿到是当前的元素 <div class="cls">传智教育</div>
        console.log(devElement);
        // 改变里面的内容
        devElement.innerHTML = brandNames[i];
        devElement.style.color = 'red';
    }
    // 3. 获取复选框的值
    var hobbyEles = document.getElementsByName("hobby");
    var hobbyValues = [];
    for (let i = 0; i <hobbyEles.length ; i++) {
        let hobbyEle = hobbyEles[i];
        console.log("选中状态："+hobbyEle.checked);
        // 获取到值，并放到我们的数组
        hobbyValues[i] = hobbyEle.value;
    }
    console.log(hobbyValues);
    /*
        style:设置元素css样式
        innerHTML：设置元素内容
    */

    // for (let i = 0; i < divs.length; i++) {
    //     //divs[i].style.color = 'red';
    //     divs[i].innerHTML = "呵呵";
    // }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    // for (let i = 0; i < hobbys.length; i++) {
    //     //alert(hobbys[i]);
    //     hobbys[i].checked = true;
    // }

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    /*for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }*/



</script>
</body>
</html>